<template>
  <view class="cardContiner mtb20 cloummStart">
    <view class="w100 rowStart alignStart gap10">
      <image
        src="/static/logo.png"
        mode="widthFix"
        style="width: 80rpx; border-radius: 50%"
      ></image>
      <view class="rowSpaceBetween w100 alignStart">
        <view class="cloummStart alignStart gap10">
          <view>
            {{ items.name }}
          </view>
          <view class="titleH3" style="font-size: 20rpx">
            {{ items.createTime }}
          </view>
        </view>
        <view :class="statusFun(items.status).class" class="status">
          {{ statusFun(items.status).value }}
        </view>
      </view>
    </view>
    <view class="w100" style="margin-top: 30rpx">
      <StepsBar :current="current" :steps="steps"></StepsBar>
    </view>
  </view>
</template>

<script>
import StepsBar from "@/components/StepsBar/index.vue";
export default {
  components: {
    StepsBar,
  },
  props: {
    items: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      current: 1,
      userItem: {
        name: "13688888888",
        createTime: "2022-01-01 12:00:00",
        status: "0",
      },
      steps: [
        {
          title: "账户信息",
          current: 1,
        },
        {
          title: "基本信息",
          current: 2,
        },
        {
          title: "结算信息",
          current: 3,
        },
        {
          title: "门店信息",
          current: 4,
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.stepIcon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: var(--themeFontColor5);
  color: #fff;
}

.active {
  background-color: #ffeee5;
  color: var(--themeDefultFontColor);
  border: 2rpx solid #ffddd1;
}

.status {
  font-size: 20rpx;
  padding: 10rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}
</style>
